import $ from '../../web-modules/jquery/jquery';
import tabTemplate from '../../../templates/html/chrome-tab.html';


const TAB_CONTENT_MARGIN = 0;

const defaultTapProperties = {
    name: 'new Tab',
    title: 'new Tab',
    favicon: false
};

let instanceId = 0;

export default class ChromeTabs {
    constructor() { }

    init(el) {
        this.el = el;

        this.instanceId = instanceId;
        this.el.setAttribute('data-chrome-tabs-instance-id', this.instanceId);
        instanceId += 1;

        this.setupCustomProperties();
        // this.setupStyleEl();
        this.setupEvents();
    }

    emit(eventName, data) {
        this.el.dispatchEvent(new CustomEvent(eventName, { detail: data }));
    }

    setupCustomProperties() {
        this.el.style.setProperty('--tab-content-margin', `${TAB_CONTENT_MARGIN}px`);
    }

    setupStyleEl() {
        this.styleEl = document.createElement('style');
        this.el.appendChild(this.styleEl);
    }

    setupEvents() {
        /*this.el.addEventListener('dblclick', event => {
            if ([this.el, this.tabContentEl].includes(event.target)) this.addTab()
        })*/

        this.tabEls.forEach((tabEl) => this.setTabCloseEventListener(tabEl));
    }

    get tabEls() {
        return Array.prototype.slice.call(this.el.querySelectorAll('.chrome-tab'));
    }

    get tabContentEl() {
        return this.el.querySelector('.x-scrollbar__content') ?? this.el.querySelector('.chrome-tabs-content');
    }

    createNewTabEl() {
        const div = document.createElement('div');
        div.innerHTML = tabTemplate;
        return div.firstElementChild;
    }

    addTab(tabProperties, { animate = false, background = false } = {}) {
        const tabEl = this.createNewTabEl();

        if (animate) {
            tabEl.classList.add('chrome-tab-was-just-added');
            setTimeout(() => tabEl.classList.remove('chrome-tab-was-just-added'), 500);
        }

        tabProperties = Object.assign({}, defaultTapProperties, tabProperties);
        this.tabContentEl.appendChild(tabEl);
        this.setTabClickEventListener(tabEl);
        this.setTabCloseEventListener(tabEl);
        this.updateTab(tabEl, tabProperties);
        this.emit('created', { tabEl });
        if (!background) this.setCurrentTab(tabEl);
        return tabEl;
    }

    setTabClickEventListener(tabEl) {
        tabEl.addEventListener('click', () => {
            this.setCurrentTab(tabEl);
        });
    }

    setTabCloseEventListener(tabEl) {
        tabEl.querySelector('.chrome-tab-close').addEventListener('click', event => {
            event.stopPropagation();
            if (!this.checkDestroy({ detail: { tabEl } })) {
                return;
            }
            this.removeTab(tabEl);
        })
    }

    get activeTabEl() {
        return this.el.querySelector('.chrome-tab[active]');
    }

    hasActiveTab() {
        return !!this.activeTabEl;
    }

    setCurrentTab(tabEl) {
        const activeTabEl = this.activeTabEl;
        if (activeTabEl === tabEl) return;
        if (activeTabEl) activeTabEl.removeAttribute('active');
        tabEl.setAttribute('active', '');
        this.emit('activeChange', { tabEl });
    }

    removeTab(tabEl) {
        const isActive = tabEl === this.activeTabEl;
        let needActiveElem = null;
        if (isActive) {
            if (tabEl.nextElementSibling) {
                needActiveElem = tabEl.nextElementSibling;
            } else if (tabEl.previousElementSibling) {
                needActiveElem = tabEl.previousElementSibling;
            }
        }
        this.emit('beforeDestroy', { tabEl });
        tabEl.parentNode.removeChild(tabEl);
        this.emit('destroyed', { tabEl });
        if (isActive && needActiveElem) {
            this.setCurrentTab(needActiveElem);
        }
    }

    updateTab(tabEl, tabProperties) {
        if (tabProperties.name) {
            tabEl.querySelector('.chrome-tab-title').textContent = tabProperties.name;
        }

        const faviconEl = tabEl.querySelector('.chrome-tab-favicon');
        if (tabProperties.favicon) {
            $(faviconEl).addClass(tabProperties.favicon);
            faviconEl.removeAttribute('hidden', '');
        }

        if (tabProperties.id) {
            tabEl.setAttribute('data-tab-id', tabProperties.id);
        }

        if (tabProperties.title) {
            tabEl.setAttribute('title', tabProperties.title);
        }

        if (tabProperties.type) {
            tabEl.setAttribute('data-tab-type', tabProperties.type);
        }

        if (tabProperties.attr) {
            for (let i in tabProperties.attr) {
                tabEl.setAttribute(i, tabProperties.attr[i]);
            }
        }
    }

    checkDestroy() {
        return true;
    }

    dispose() {
        this.el = null;
    }
}
